<!-- 获取商铺列表 -->
<template lang="">
  <div>
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="top">
      <div class="div1">
        <span @click="click1">{{ title }}</span>
      </div>
      <div class="div2">
        <span @click="click2">排序</span>
      </div>
      <div>
        <span @click="click3">筛选</span>
      </div>
    </div>
    <div style="margin-top: 78px;"></div>
    <div class="click1" v-show="show1">
      <div class="cl">
        <div style="width: 50%; height: 450px;">
          <div v-for="(item,index) in this.shopsInfo" :key="index" class="leftL_1" @click="click1_1(item)">
            <div style="font-size: 10px; margin-left: 15px;">
              <img v-if="item.image_url.slice(-3) == 'png'"
                :src="'https://fuss10.elemecdn.com'+'/'+item.image_url.slice(0,1)+'/'+item.image_url.slice(1,3)+'/'+item.image_url.slice(3,36)+'.'+item.image_url.slice(-3) "
                alt="" style="width: 15px; height: 15px;">
              <img v-else
                :src="'https://fuss10.elemecdn.com'+'/'+item.image_url.slice(0,1)+'/'+item.image_url.slice(1,3)+'/'+item.image_url.slice(3,36)+'.'+item.image_url.slice(-4) "
                alt="" style="width: 15px; height: 15px;">
              <span>{{item.name}}</span>

            </div>
            <div style="color: white;">
              <span style="background-color: #999; border-radius: 5px;">{{item.count}}</span>
              <i class="iconfont icon-jiantou" style="margin: 0 10px; color: #ccc;"></i>
            </div>
          </div>
        </div>
        <div style="width: 50%; height: 450px; overflow: scroll; background-color: #fff;">
          <div class="leftL_2" v-for="(item1,index) in this.info.sub_categories" :key="index" @click="click1_2(item1)">
            <div style="margin-left: 15px;" v-if="item1.level == 2">{{item1.name}}</div>
            <div style="margin-right: 15px;" v-if="item1.level == 2">{{item1.count}}</div>
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 100%; opacity: 0.5; background-color: #ccc; z-index: 10;"></div>
    </div>
    <div class="click2" v-show="show2">
      <div @click="clcik2_1(4)">
        <van-icon name="smile-o" style="margin: 0 10px;" />
        <span>智能排序</span>
      </div>
      <div @click="clcik2_1(5)">
        <van-icon name="smile-o" style="margin: 0 10px;" />
        <span>距离最近</span>
      </div>
      <div @click="clcik2_1(6)">
        <van-icon name="smile-o" style="margin: 0 10px;" />
        <span>销量最高</span>
      </div>
      <div @click="clcik2_1(1)">
        <van-icon name="smile-o" style="margin: 0 10px;" />
        <span>起送价最低</span>
      </div>
      <div @click="clcik2_1(2)">
        <van-icon name="smile-o" style="margin: 0 10px;" />
        <span>配送速度最快</span>
      </div>
      <div @click="clcik2_1(3)">
        <van-icon name="smile-o" style="margin: 0 10px;" />
        <span>评分最高</span>
      </div>
      <div style="width: 100%; height: 100%; opacity: 0.5; background-color: #ccc; z-index: 10;"></div>
    </div>
    <div class="click3" v-show="show3">
      <div style="font-size: 12px; margin-left: 10px; line-height: 40px;">配送方式</div>
      <div v-for="(item3,index) in this.info1" :key="index">
        <div
          style="margin-left: 20px; border: 1px solid rgb(241, 241, 241); text-align: center; width: 90px; font-size: 14px; ">
          {{item3.text}}</div>
      </div>
      <div style="margin: 20px 0; font-size: 14px;margin-left: 10px;">商家属性 (可以多选)</div>
      <div class="fliter">
        <div v-for="(item,index) in this.info2" :key="index"
          style="margin-left: 10px; border: 1px solid rgb(241, 241, 241); text-align: center; width: 90px;font-size: 14px; margin-bottom: 20px;"
          @click="clickAction(index,item.id)" class="fliter1">
          {{item.name}}
        </div>
        <div class="button" style="float: left;width: 100%;background-color: rgb(241, 241, 241);padding: 10px;">
          <van-button type="primary"
            style="float: left; width: 48%; background-color: white; border: none; color: black;" @click="clickall">清空
          </van-button>
          <van-button type="info"
            style="float: right; margin-left: 5px; width: 48%; background-color: rgb(86,209,118);border: none;"
            @click="click5">确定
          </van-button>
        </div>
      </div>
      <div style="width: 100%; height: 100%; opacity: 0.5; background-color: #ccc; z-index: 10;"></div>
    </div>
    <div></div>
    <SmallShops_item v-for="(item,index) in shopsInfos" :key="index" :shops="item"></SmallShops_item>
  </div>
</template>
<script>
  import $ from "jquery"
  import Nav from "@/components/Nav.vue";
  import SmallShops_item from "@/components/SmallShops_item.vue";
  export default {
    name: "ShopsL",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title: "新品推荐",
        title_name: '',
        right_name: '',
        shopsInfos: [],
        shopsInfo: [],
        show1: false,
        show2: false,
        show3: false,
        category_ids: 4,//食品分类
        delivery_mode: 1,//默认筛选
        info: [],
        info1: [],
        info2: [],
        sidall: [//排序
          {
            sid1: "null",
          }
          , {
            sid1: "null",
          },
          {
            sid1: "null",
          },
          {
            sid1: "null",
          },
          {
            sid1: "null",
          },
          {
            sid1: "null",
          }
        ],
      }
    },
    components: {
      SmallShops_item, Nav
    },
    methods: {
      clickall() {
        this.show3 = false;
        var fliter2 = document.querySelectorAll('.fliter1')
        fliter2.forEach(function (v) {
          $(v).css("color", "black")
        })
        this.title = this.$router.history.current.query.title;
        let latitude = this.$router.history.current.query.latitude;
        let longitude = this.$router.history.current.query.longitude;
        this.axios.get("https://elm.cangdu.org/shopping/restaurants?latitude=" + latitude + "&longitude=" + longitude).then(((res) => {
          this.shopsInfos = res.data;
        })).catch((err) => {
          console.log(err)
        })
      },
      click5() {
        this.show3 = false;
        let latitude = this.$router.history.current.query.latitude;
        let longitude = this.$router.history.current.query.longitude;
        // ${this.category_ids}
        this.axios.get(`https://elm.cangdu.org/shopping/restaurants?latitude=${latitude}&longitude=${longitude}&offset=0&limit=20&extras[]=activities&keyword=&restaurant_category_id=&restaurant_category_ids[]=&order_by=&delivery_mode[]=&support_ids[]=${this.sidall[0].sid1}&support_ids[]=${this.sidall[1].sid1}&support_ids[]=${this.sidall[2].sid1}&support_ids[]=${this.sidall[3].sid1}&support_ids[]=${this.sidall[4].sid1}&support_ids[]=${this.sidall[5].sid1}`)
          .then(res => {
            this.shopsInfos = res.data;
          })
      },
      clickAction(index, id) {
        var fliter1 = document.querySelectorAll('.fliter1')
        if ($(fliter1[index]).css("color") == "rgb(0, 0, 0)") {
          $(fliter1[index]).css("color", "rgb(49, 144, 232)")
        } else {
          $(fliter1[index]).css("color", "rgb(0, 0, 0)")
        }
        this.sidall.forEach(function (v, i) {
          if (index == i) {
            v.sid1 = id;
          }
        })
      },
      click1() {
        if (this.show1) {
          this.show1 = false
        } else {
          this.show1 = true
          this.show2 = false
          this.show3 = false
        }
        this.show2 = false;
        this.show3 = false;
        let a = this.$router.history.current.query.title;
        const _this = this;
        this.shopsInfo.forEach(function (v) {
          if (v.name == a) {
            _this.info = v
          } else {
            v.sub_categories.forEach(function (x) {
              if (x.name == a) {
                _this.info = v
              }
            })
          }
        })
      },
      click1_1(item1) {
        this.info = item1;
      },
      click1_2(item2) {
        this.category_ids = item2.id;
        let latitude = this.$router.history.current.query.latitude;
        let longitude = this.$router.history.current.query.longitude;
        this.axios.get(`https://elm.cangdu.org/shopping/restaurants?latitude=${latitude}&longitude=${longitude}&offset=0&limit=20&extras[]=activities&keyword=&restaurant_category_id=&restaurant_category_ids[]=${this.category_ids}&order_by=null&delivery_mode[]=${this.delivery_mode}&support_ids[]=${this.sidall[0].sid1}&support_ids[]=${this.sidall[1].sid1}&support_ids[]=${this.sidall[2].sid1}&support_ids[]=${this.sidall[3].sid1}&support_ids[]=${this.sidall[4].sid1}&support_ids[]=${this.sidall[5].sid1}`).then(((res) => {
          this.shopsInfos = res.data;
        })).catch((err) => {
          console.log(err)
        })
        this.show1 = false
        this.title = item2.name;
        this.title_name = this.title
      },
      click2() {
        if (this.show2) {
          this.show2 = false
        } else {
          this.show2 = true
          this.show1 = false
          this.show3 = false
        }
        this.show1 = false;
        this.show3 = false;
      },
      clcik2_1(item3) {
        this.delivery_mode = item3;
        let latitude = this.$router.history.current.query.latitude;
        let longitude = this.$router.history.current.query.longitude;
        this.axios.get(`https://elm.cangdu.org/shopping/restaurants?latitude=${latitude}&longitude=${longitude}&offset=0&limit=20&extras[]=activities&keyword=&restaurant_category_id=&restaurant_category_ids[]=&order_by=${this.delivery_mode}&delivery_mode[]=null`).then(((res) => {
          this.shopsInfos = res.data;
        })).catch((err) => {
          console.log(err)
        })
        this.show2 = false;
      },
      click3() {
        if (this.show3) {
          this.show3 = false
        } else {
          this.show3 = true
          this.show2 = false
          this.show1 = false
        }
        this.show2 = false;
        this.show1 = false;
      },
    },
    created() {
      this.title = this.$router.history.current.query.title;
      this.title_name = this.title;
      let latitude = this.$router.history.current.query.latitude;
      let longitude = this.$router.history.current.query.longitude;
      this.axios.get("https://elm.cangdu.org/shopping/restaurants?latitude=" + latitude + "&longitude=" + longitude).then(((res) => {
        this.shopsInfos = res.data;
      })).catch((err) => {
        console.log(err)
      })
      // https://elm.cangdu.org/shopping/v2/restaurant/category
      this.axios.get("https:elm.cangdu.org/shopping/v2/restaurant/category").then(((res) => {
        this.shopsInfo = res.data;
      })).catch((err) => {
        console.log(err)
      })
      this.axios.get("https://elm.cangdu.org/shopping/v1/restaurants/delivery_modes").then(((res) => {
        this.info1 = res.data;
      })).catch((err) => {
        console.log(err)
      })
      this.axios.get("https://elm.cangdu.org/shopping/v1/restaurants/activity_attributes").then(((res1) => {
        this.info2 = res1.data;
      })).catch((err) => {
        console.log(err)
      })

    },

  }
</script>

<style lang="less" scoped>
  .top {
    width: 100%;
    display: flex;
    line-height: 35px;
    font-size: 14px;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;
    padding: 3px;
    box-sizing: border-box;
    position: fixed;
    top: 44px;
    z-index: 20;
    background-color: #fff;
  }

  .cl {
    display: flex;
    justify-content: space-between;
  }

  .click1 {
    width: 100%;
    height: 450px;
    position: fixed;
    top: 85px;
    left: 0;
    font-size: 10px;
    z-index: 20;

  }

  .click2 {
    width: 100%;
    height: 300px;
    position: fixed;
    top: 85px;
    left: 0;
    font-size: 18px;
    z-index: 20;
    background-color: #fff;
  }

  .click3 {
    width: 100%;
    height: 300px;
    position: fixed;
    top: 85px;
    left: 0;
    font-size: 18px;
    z-index: 20;
    background-color: #fff;
  }

  .click2 div {
    line-height: 50px;
    border-bottom: 1px solid #ccc;
  }

  .leftL_1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    background-color: rgb(241, 241, 241);
  }

  .leftL_2 {
    background-color: #fff;
    color: black;
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
  }

  .top div {
    width: 33.3%;
    text-align: center;
  }

  .top .div1 {
    border-right: 1px solid #ccc;
  }

  .top .div2 {
    border-right: 1px solid #ccc;
  }

  .fliter {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .normal {
    background-color: white;
    color: rgb(49, 144, 232);
  }

  .light {
    background-color: rgb(49, 144, 232);
    color: white;
  }
</style>